<template>
	<view class="wxcode-container">
		<!-- 主要内容区域 -->
		<view class="content">
			<!-- 主标题 -->
			<view class="main-title">湘花椒资料查询</view>
			
			<!-- 副标题 -->
			<view class="sub-title">一性交费永久使用</view>
			
			<!-- 二维码区域 -->
			<view class="qr-section">
				<image show-menu-by-longpress class="qr-code" :src="qrData"></image>
				<view class="qr-label">扫码关注微信公众号</view>
			</view>
			
			<!-- 功能选项区域 -->
			<view class="features">
				<view class="feature-item" >
					<text>维修资料查询</text>
				</view>
				<view class="feature-item">
					<text>原厂数据下载</text>
				</view>
				<view class="feature-item">
					<text>配件查询</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const url = 'https://m.nangua.website'
	// const url = 'https://tg.whtxqp.com'
	export default {
		data() {
			return {
				qrData: ''
			}
		},
		methods: {
			generateQRCode() {
				uni.showLoading({
					title: '加载中...'
				})
				setTimeout(() => {
					uni.hideLoading()
				}, 1000)
				uni.request({
					url: url + "/app-api/member/social-user/wxp-qrcode",
					method: "GET",
					header: {
					    "Authorization": `Bearer ${uni.getStorageSync('token')}`
					},
					success: (data) => {
						console.log(data, 'data====二维码')
						if (data.data.code == 0) {
							this.qrData = data.data.data
						}
						else if (res.data.code == 401) {
							uni.showToast({
								title: '登录失效，请重新登录',
								icon: 'none'
							})
							uni.removeStorageSync('token')
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
						}
					}
				})
			}
		},
		mounted() {
			this.generateQRCode();
		}
	}
</script>

<style scoped>
.wxcode-container {
	min-height: 100vh;
	background: linear-gradient(180deg, #FF6B35 0%, #CC3300 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40rpx 20rpx;
	box-sizing: border-box;
}

.content {
	width: 100%;
	max-width: 600rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.main-title {
	font-size: 80rpx;
	font-weight: bold;
	color: #FFD700;
	margin-bottom: 20rpx;
	text-align: center;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.sub-title {
	font-size: 70rpx;
	font-weight: bold;
	color: #000000;
	margin-bottom: 80rpx;
	text-align: center;
	text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.5);
}

.qr-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 60rpx;
}

.qr-code {
	position: relative;
	width: 300rpx;
	height: 300rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20rpx;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
	overflow: hidden;
}

.qr-background {
	width: 100%;
	height: 100%;
	position: relative;
	background: #FFFFFF;
}

.qr-pattern {
	width: 100%;
	height: 100%;
	position: relative;
	padding: 20rpx;
	box-sizing: border-box;
}

.qr-corner {
	position: absolute;
	width: 60rpx;
	height: 60rpx;
	border: 6rpx solid #000000;
}

.qr-corner-tl {
	top: 20rpx;
	left: 20rpx;
	border-right: none;
	border-bottom: none;
}

.qr-corner-tr {
	top: 20rpx;
	right: 20rpx;
	border-left: none;
	border-bottom: none;
}

.qr-corner-bl {
	bottom: 20rpx;
	left: 20rpx;
	border-right: none;
	border-top: none;
}

.qr-dots {
	position: absolute;
	top: 100rpx;
	left: 20rpx;
	right: 20rpx;
	bottom: 20rpx;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: repeat(8, 1fr);
	gap: 4rpx;
}

.qr-dot {
	width: 8rpx;
	height: 8rpx;
	background: #000000;
	border-radius: 50%;
	opacity: 0.8;
}

.qr-dot:nth-child(odd) {
	opacity: 0.4;
}

.qr-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #FFFFFF;
	border: 2rpx solid #000000;
	border-radius: 50%;
	width: 80rpx;
	height: 80rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 10;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.logo-icon {
	font-size: 24rpx;
	margin-bottom: 4rpx;
}

.logo-text {
	font-size: 16rpx;
	color: #FFFFFF;
	background: #CC3300;
	padding: 2rpx 8rpx;
	border-radius: 8rpx;
	font-weight: bold;
}

.qr-label {
	font-size: 32rpx;
	color: #000000;
	font-weight: normal;
	text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.5);
}

.features {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20rpx;
}

.feature-item {
	display: flex;
	align-items: center;
	gap: 16rpx;
	font-size: 50rpx;
	font-weight: bold;
	color: #000000;
	text-align: center;
	padding: 20rpx 32rpx;
	justify-content: center;
}

.feature-item:active {
	transform: scale(0.95);
	background: rgba(255, 255, 255, 0.25);
}

.feature-icon {
	font-size: 32rpx;
}


</style>
